<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-left: 10px;">
      <el-tab-pane label="全部" name="zero"></el-tab-pane>
      <el-tab-pane label="前端开发" name="first"></el-tab-pane>
      <el-tab-pane label="后端开发" name="second"></el-tab-pane>
      <el-tab-pane label="移动开发" name="third"></el-tab-pane>
      <el-tab-pane label="前沿技术" name="fourth"></el-tab-pane>
      <el-tab-pane label="运维技术" name="fifth"></el-tab-pane>
      <el-tab-pane label="测试技术" name="sixth"></el-tab-pane>
      <el-tab-pane label="其他技术" name="seventh"></el-tab-pane>
    </el-tabs>
<!--    <div class="padding-sm">-->
<!--      <el-row>-->
<!--        <el-col :span="16" :offset="4">-->
<!--          <el-carousel :interval="3000" arrow="always" height="400px">-->
<!--            <el-carousel-item v-for="(item, index) in this.$global.carousel" :key="index">-->
<!--              <el-image :src="item"></el-image>-->
<!--            </el-carousel-item>-->
<!--          </el-carousel>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->

    <div v-show="hotActivityViewList.length > 0">
      <el-row>
        <el-col :span="22" class="padding-tlr">
          <i class="el-icon-star-on" style="font-size: 20px; color: orange">热门课程</i>
        </el-col>
        <el-col :span="2" class="more">
          <div @click="toActivityDiscover()">
            更多<i class="el-icon-arrow-right"></i>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" v-for="(item, index) in hotActivityViewList" :key="item.activityId"
                class="padding-sm">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" :style="index >5 ? 'margin-top: 20px;':''">
            <el-image style="width: 100%; height: 150px"
                      :src="mediaHost + item.activityLogo"
                      fit="cover" @click="toActivityDetail(item.activityId)"></el-image>
            <div style="padding-left: 10px; padding-right:10px;padding-bottom:10px;height: 80px;" @click="toActivityDetail(item.activityId)">
              <div style="font-size: 15px; height: 60px;" class="title">
                <span style="color: #409EFF;">{{ item.activityName }}</span>
                <span>{{ item.activityDesc }}</span>
              </div>
              <div style="color: gray;font-size: 10px; margin-top: 10px;">
                <span>{{ item.authNum }}人报名</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-show="newActivityViewList.length > 0">
      <el-row>
        <el-col :span="22" class="padding-tlr">
          <i class="el-icon-star-on" style="font-size: 20px; color: orange">新上好课</i>
        </el-col>
        <el-col :span="2" class="more">
          <div @click="toActivityDiscover">
            更多<i class="el-icon-arrow-right"></i>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" v-for="(item, index) in newActivityViewList" :key="item.activityId"
                class="padding-sm">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" :style="index >5 ? 'margin-top: 20px;':''">
            <el-image style="width: 100%; height: 150px"
                      :src="mediaHost + item.activityLogo"
                      fit="cover" @click="toActivityDetail(item.activityId)"></el-image>
            <div style="padding-left: 10px; padding-right:10px;padding-bottom:10px;height: 80px;" @click="toActivityDetail(item.activityId)">
              <div style="font-size: 15px; height: 60px;" class="title">
                <span style="color: #409EFF;">{{ item.activityName }}</span>
                <span>{{ item.activityDesc }}</span>
              </div>
              <div style="color: gray;font-size: 10px; margin-top: 10px;">
                <span>{{ item.authNum }}人报名</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "ActivityHouse",
  data() {
    return {
      mediaHost : this.$global.mediaHost,
      hotActivityViewList: [],
      newActivityViewList: [],
      activityPage: {
        lastValue: 0,
        size: 12,
        totalPage: 0,
        hasMore: false,
        page: 1,
        totalCount: 0
      },
      activityType: 0,
      activeName: 'zero',
      paramsData: {
        page: this.activityPage,
        activityType: this.activityType
      },
      hasAuth: false,
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.index)
      this.activityType = tab.index;
      this.getHotActivityList()
      this.getNewActivityList()
    },
    getHotActivityList: function () {
      this.paramsData.page = this.activityPage
      this.paramsData.activityType = this.activityType
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/hotActivityList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.hotActivityViewList = responseData.pageData.data
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    getNewActivityList: function () {
      this.paramsData.page = this.activityPage
      this.paramsData.activityType = this.activityType
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/newActivityList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.newActivityViewList = responseData.pageData.data
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    toActivityDetail: function (activityId) {
      this.$router.push({path:"/homePage/activityDetail",query: {activityId : activityId+"", pageName: "activityHouse"}})
    },
    toActivityDiscover: function () {
      this.$router.push({path: '/homePage/activityDiscover'})
    },
  },
  created() {
    this.getHotActivityList()
    this.getNewActivityList()
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.padding-sm {
  padding: 10px;
}

.padding-xs {
  padding: 5px;
}
.padding-tlr {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.more {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
}
.title{
  width:100%;
  /*white-space:nowrap;*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>
